<template>
  <div>
    <div id="main"
         style="width: 750px;height:400px;"></div>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {}
  },
  created() { },
  methods: {
    myEcharts() {
      let resultList = [];
      this.getRequest("/order/api/orderCharts").then(res => {
        console.log(res)
        if (res.code == 200 && res.msg == "success") {
          resultList = res.data;
         

          var myChart = this.$echarts.init(document.getElementById('main'));
          var option2 = {
            title:{
              text:"全部订单状态统计图",

            } , 
            tooltip: {
              trigger: 'item'
            },
            legend: {
              top: '5%',
              left: 'center'
            },
            series: [
              {
                name: '订单状态分布图',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                  borderRadius: 10,
                  borderColor: '#fff',
                  borderWidth: 2
                },
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                
                  label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: false
                },
                data: resultList
            
              }
            ]
          };

          myChart.setOption(option2);
        }
        else {
          this.$message.error("出错了")
        }
      }).catch(err => {
				console.log(err)
        this.$message.error("请求失败")

      })


    }


  },
  mounted() {
    this.myEcharts()
  }

}
</script>

<style scoped>
</style>